<template>
	<view class="myAuth">
		<u--form labelPosition="left" :model="formData" :rules="rules" ref="form1">
			<u-form-item label="店铺名称" prop="name" borderBottom ref="item1" labelWidth="80" :required="type!=1">
				<u--input v-model="formData.name" border="none" placeholder="请输入店铺名称" type="text">
				</u--input>
			</u-form-item>
			<u-form-item label="店铺LOGO" prop="logo" :borderBottom="true" ref="item1" labelWidth="80"
				labelPosition="top">
				<imgUpload code="zsbm" placeholder="请上传图片" :limit="1" @upImgs="upImgs" ref="imgUpload"
					:imageArr="logImgArr" :disable="type==1" :showdel="type!=1"></imgUpload>
			</u-form-item>
			<u-form-item label="手机号码(账号)" prop="account" borderBottom ref="item1" labelWidth="80" :required="type!=1">
				<u--input v-model="formData.account" border="none" placeholder="请输入手机号码" maxlength="11" type="number">
				</u--input>
			</u-form-item>
<!-- 			<u-form-item label="密码" :prop="token?'':password" borderBottom ref="item1" labelWidth="80" :required="token?false:true">
				<u--input v-model="formData.password" border="none" placeholder="请输入密码" type="password">
				</u--input>
			</u-form-item> -->
			<u-form-item label="店铺描述" prop="refer" borderBottom ref="item3">
				<u--textarea placeholder="不低于3个字" v-model="formData.refer" count></u--textarea>
			</u-form-item>
			<view class="adressDiv">
				<u-form-item label="详细地址" prop="address" borderBottom ref="item3" labelWidth="80" :required="true">
					<view class="other-list">
						<view class="right">
							<view class="myAddress">
								<view class="cityAddres">
									<view class="top">
										{{formData.address}}
									</view>
									<view class="city" @click="goMap">
										<u-icon name="map" color="#00C777" size="18" class="top"></u-icon>
										<view>坐标</view>
									</view>
								</view>

							</view>
						</view>
					</view>
				</u-form-item>
			</view>
			<u-form-item label="店铺联系人" prop="door_contacts" borderBottom ref="item1" labelWidth="100" :required="type!=1">
				<u--input v-model="formData.door_contacts" border="none" placeholder="请输入店铺联系人" 
					type="text">
				</u--input>
			</u-form-item>
			<u-form-item label="门店联系电话" prop="telephone" borderBottom ref="item1" labelWidth="100" :required="type!=1">
				<u--input v-model="formData.telephone" border="none" placeholder="请输入门店联系电话" maxlength="11"
					type="number">
				</u--input>
			</u-form-item>
			<u-form-item label="核销收款账号" borderBottom ref="item1" labelWidth="100" :required="false">
				<u--input v-model="formData.account_number" border="none" placeholder="请输入核销收款账号" maxlength="11"
					type="number">
				</u--input>
			</u-form-item>
			<u-form-item label="门头照" prop="door_image" :borderBottom="true" ref="item1" labelWidth="80"
				labelPosition="top">
				<imgUpload code="zsbm" placeholder="请上传图片" :limit="1" @upImgs="upImgs1" ref="imgUpload1"
					:imageArr="logImgArr1" :disable="type==1" :showdel="type!=1"></imgUpload>
			</u-form-item>
			<u-form-item label="营业执照" prop="license_image" :borderBottom="true" ref="item1" labelWidth="80"
				labelPosition="top">
				<imgUpload code="zsbm" placeholder="请上传图片" @upImgs="upImgs2" ref="imgUpload2" :imageArr="logImgArr2"
					:disable="type==1" :showdel="type!=1"></imgUpload>
			</u-form-item>
			<u-form-item label="店内照片" :borderBottom="true" ref="item1" labelWidth="80"
				labelPosition="top" >
				<imgUpload code="zsbm" placeholder="请上传图片" @upImgs="upImgs4" ref="imgUpload4" :imageArr="logImgArr4" :limit="6"
					:disable="type==1" :showdel="type!=1"></imgUpload>
			</u-form-item>
			<u-form-item label="收款二维码" :borderBottom="true" ref="item1" labelWidth="80" labelPosition="top">
				<imgUpload code="zsbm" placeholder="请上传图片" :limit="1" @upImgs="upImgs3" ref="imgUpload3"
					:imageArr="logImgArr3" :disable="type==1" :showdel="type!=1"></imgUpload>
			</u-form-item>
		</u--form>
		<view class="botBtn">
			<view style="width: 100%;">
				<u-button class="custom-style" text="提交"
					customStyle="background: linear-gradient(90deg, #00D5CE 0%, #C7EACE 100%);color:#fff;margin-top:20px;border-radius: 30px;"
					@click="goAuth">
				</u-button>
			</view>
		</view>
	</view>
</template>
<style>
	page {
		background-color: #fff;
	}
</style>
<script>
	import eventBUs from '../../utils/eventBus.js'
	import vvSelect from '@/components/vv-select/vv-select.vue'
	import imgUpload from '@/components/common/imgUpload.vue'
	import {
		merchantRego,getMerchant,merchantUpdate
	} from '@/request/api.js'
	export default {
		components: {
			vvSelect,
			imgUpload
		},
		data() {
			return {
				logImgArr: [],
				logImgArr1: [],
				logImgArr2: [],
				logImgArr3: [],
				logImgArr4: [],
				mapData: null,
				actions: [],
				showSex: false,
				formData: {
					account: "",
					password: '',
					name: '',
					logo: '',
					refer: '',
					address: '',
					lon: '',
					lat: '',
					door_image: '', //门头照
					images: '', //店内或场地营业照片
					license_image: '', //营业执照
					door_contacts: '', //	店铺联系人
					telephone: '', //	店铺联系号码
					account_number: '', //收款账号
					account_image: '', //二维码收款
					classify:''
				},
				ibecName: '',
				token:'',
				rules: {
					'door_contacts': {
						required: true,
						message: '请输入店铺联系人',
						trigger: ['change', 'blur'],
					},
					'name': {
						required: true,
						message: '请输入店铺名称',
						trigger: ['change', 'blur'],
					},
					'account': {
						required: true,
						message: '请输入正确的手机号码',
						trigger: ['change', 'blur'],
						max: 11,
						validator: (rule, value, callback) => {
							// 上面有说，返回true表示校验通过，返回false表示不通过
							// this.$u.test.mobile()就是返回true或者false的
							return this.$u.test.mobile(value);
						},
					},
					'password': {
						type: 'string',
						transform(value) {
							return String(value);
						},
						required: true,
						message: '请输入密码',
						trigger: ['blur', 'change']
					},
					'telephone': {
						required: true,
						message: '请输入正确的手机号码',
						trigger: ['change', 'blur'],
						max: 11,
						validator: (rule, value, callback) => {
							// 上面有说，返回true表示校验通过，返回false表示不通过
							// this.$u.test.mobile()就是返回true或者false的
							return this.$u.test.mobile(value);
						}
					},
					'account_number': {
						type: 'string',
						transform(value) {
							return String(value);
						},
						required: true,
						message: '请输入核销收款账号',
						trigger: ['blur', 'change']
					},
					'logo': {
						type: 'string',
						transform(value) {
							return String(value);
						},
						required: true,
						message: '请上传店铺LOGO',
						trigger: ['blur', 'change']
					},
					'door_image': {
						type: 'string',
						transform(value) {
							return String(value);
						},
						required: true,
						message: '请上传门头照',
						trigger: ['blur', 'change']
					},
					'license_image': {
						type: 'string',
						transform(value) {
							return String(value);
						},
						required: true,
						message: '请上传营业执照',
						trigger: ['blur', 'change']
					},
					'address': {
						type: 'string',
						transform(value) {
							return String(value);
						},
						required: true,
						message: '请选择详情地址',
						trigger: ['blur', 'change']
					},
				}
			}
		},
		onLoad(res) {
			uni.$on('map', e=>{
				console.log(e,'map')
				this.formData.address = e.address
				this.formData.lon = e.longitude
				this.formData.lat = e.latitude
				this.formData.classify = e.classify
				this.$refs.form1.validateField('address')
			})
			if(res.id==1){
				let token = uni.getStorageSync('shopToken')
				this.token = token;
				this.getMerchant()
			}
		},
		onHide() {
			// this.empt()
			window.sessionStorage.setItem('mapData', '');
		},
		onShow() {
			// let map =  uni.getStorageSync('mapData')
			// console.log(map,222)
			let map = window.sessionStorage.getItem('mapData');
			
			// console.log(map,222)
			if (map) {
				this.mapData = JSON.parse(map)
				// console.log(this.mapData, 222)
				this.formData.address = this.mapData.address
				this.formData.lon = this.mapData.lng
				this.formData.lat = this.mapData.lat
				this.formData.classify = this.mapData.classify
				this.$refs.form1.validateField('address')
			}
		},
		methods: {
			empt(){
				for(let k in this.formData){
					this.formData[k] = ''
				}
				this.logImgArr = []
				this.logImgArr1= []
				this.logImgArr2= []
				this.logImgArr3= []
				this.logImgArr4= []
			},
			async getMerchant() {
				let res = await getMerchant()
				this.formData = res.data.merchant
				this.logImgArr.push({ //显示logo图片
					url: this.formData.logo
				})
				this.formData['account'] = res.data.mobile;
				this.logImgArr1.push({ //显示logo图片
					url: this.formData.door_image
				})
				this.logImgArr2.push({ 
					url: this.formData.license_image
				})
				if(this.formData.account_image){
					this.logImgArr3.push({
						url: this.formData.account_image
					})
				}
				
				if(this.formData.images){
					this.formData.images.map(item=>{
						this.logImgArr4.push({//店内照片
							url: item
						})
					})
				}
				
				this.$refs.form1.setRules(this.rules)
				// console.log(res)
			},
			upImgs4(e) {
				let arr = e.images
				this.formData.images = arr.join(',') //收款二维码
				// this.$refs.form1.validateField('account_image')
				console.log(e, this.formData.images, 'images');
			},
			upImgs3(e) {
				let arr = e.images
				this.formData.account_image = arr.join(',') //收款二维码
				// this.$refs.form1.validateField('account_image')
				console.log(e, this.formData.account_image, 'account_image');
			},
			upImgs2(e) {
				let arr = e.images
				this.formData.license_image = arr.join(',') //营业执照
				this.$refs.form1.validateField('license_image')
				console.log(e, this.formData.license_image, 'license_image');
			},
			upImgs1(e) {
				let arr = e.images
				this.formData.door_image = arr.join(',') //门头照
				this.$refs.form1.validateField('door_image')
				console.log(e, this.formData.door_image, 'door_image');
			},
			upImgs(e) {
				let arr = e.images
				this.formData.logo = arr.join(',') //门头照
				this.$refs.form1.validateField('logo')
				console.log(e, this.formData.logo, 'logo');
			},
			goMap() {
				// uni.navigateTo({
				// 	url: "/my_pages/wxAccounts/wxAccounts"
				// })
				uni.navigateTo({
					// url: "/my_pages/wxAccounts/wxAccounts"
					url:"/components/common/mapInfo"
				})
			},
			pickerChange(e, name) {
				// console.log(e,name)
				this.formData.ibec_id = e.toString()
				this.$refs.form1.validateField('ibec_id')
			},
			async getUser() {
				let res = await getStaff()
				this.formData.name = res.data.ibec.name
				this.formData.ibec_id = res.data.ibec.id
				this.formData.mobile = res.data.mobile
				uni.setStorageSync('userInfo', res.data)
				this.$eventBus.$emit('hasLogin', true);
			},
			async getIbec() {
				let res = await getIbec()
				this.actions = res.data
				console.log(this.actions)
			},
			select(e) {
				this.formData.name = e.name
				this.formData.ibec_id = e.id
				this.$refs.form1.validateField('ibec_id')
			},
			async merchantUpdate(){
				console.log(this.formData,'update')
				let res = await merchantUpdate(this.formData);
				uni.showToast({
					icon:'none',
					title:'修改成功！'
				})
			},
			goAuth() {
				console.log(this.formData,111)
				this.$refs.form1.validate().then(res => {
					if(this.token){
						this.merchantUpdate()
						return false;
					}
					merchantRego(this.formData).then(res => {
						if (res.code == 200) {
							uni.navigateTo({
								url: '/my_pages/components/success?title=注册成功'
							})
						}
					})
				}).catch(errors => {
					uni.$u.toast('请正确填写信息')
				})
			}
		},
		onReady() {
			//如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
			this.$refs.form1.setRules(this.rules)
		},
	}
</script>

<style lang="scss" scoped>
	::v-deep .adressDiv .u-form-item__body__right {
		// align-items: flex-end;
	}

	.other-list {
		display: flex;
		align-items: center;
		padding: 20rpx 0;
		justify-content: space-between;
		width: 100%;
		.left {
			width: 20%;
		}

		.right {
			display: flex;
			align-items: center;
			flex: 1;

			.myAddress {
				display: flex;
				flex-direction: column;
				width: 100%;

				.cityAddres {
					display: flex;

					.top {
						flex: 1;
					}

					.city {
						color: #00C777;
						// width: 55px;
						display: flex;
						align-items: center;
					}
				}

				.address {}
			}
		}
	}

	.myAuth {
		padding: 30rpx;
	}

	::v-deep .u-input {
		background-color: #fff !important;
	}

	::v-deep .u-transition {
		overflow: scroll !important;
		height: 50vh !important;
	}

	.compony {
		display: flex;
		padding-top: 6px;
		padding-left: 9px;
		padding-right: 9px;
		height: 24px;
		border-radius: 4px;
		justify-content: space-between;

		.select {
			flex: 1;
		}
	}

	.botBtn {
		display: flex;
		justify-content: center;
		align-items: center;
		position: relative;
		/* width: 100%; */
		padding: 20rpx;
		margin-bottom: 100rpx;
	}

	.custom-style {
		width: 48% !important;
	}
</style>